<template>
	<div class="decorate-goods" 
  :style="tplItemData.modulePadding || tplItemData.modulePadding ==0?'padding-top:'+tplItemData.modulePadding+'px;padding-bottom:'+tplItemData.modulePadding+'px;':'padding-top:5px;padding-bottom:5px;'" >
    <!-- 双列商品 -->
    <biserial-row-layout v-if="tplItemData.layout==1" :tplItemData="tplItemData" :itemPic="itemPic"></biserial-row-layout>
    <!-- 单列商品 -->
    <single-row-layout v-if="tplItemData.layout==2" :tplItemData="tplItemData" :itemPic="itemPic"></single-row-layout>
    <!-- 滑动商品 -->
    <slider-layout v-if="tplItemData.layout==3" :tplItemData="tplItemData" :itemPic="itemPic"></slider-layout>
  </div>
</template>

<script>
  import singleRowLayout from './singleRowLayout'
  import biserialRowLayout from './biserialRowLayout'
  import sliderLayout from './sliderLayout'
  import Vue from 'vue'

  export default Vue.extend({
    name: 'index',
    components: {
      singleRowLayout,
      biserialRowLayout,
      sliderLayout
    },
    props: {
      tplItemData: {
        type: Object,
        default() {
          return {}
        }
      },
      itemPic: {
        tpye: String
      }
    },
    watch: {
      'tplItemData'() {
      }
    },
    created() {
    }
  })
</script>

<style lang="scss">

</style>
